<template>
	<view class="page">
		<view class="type">
			<view class="title">
				首选
			</view>
			<helang-checkbox ref="checkboxA" @change="valueChangeA"></helang-checkbox>
		</view>
		<view class="type">
			<view class="title">
				次选
			</view>
			<helang-checkbox ref="checkboxB" @change="valueChangeB"></helang-checkbox>
		</view>
		<view class="tip">
			*首选：必选1科；   任选：必须2科
		</view>
		<view class="btn">
			查询
		</view>
		
		<!-- 列表 -->
		<view class="list-wrap">
			<view class="search-result">
				接受此选科组合的专业(共
				<text class="num">365</text>
				个)
			</view>
			<view class="table-wrap">
				<view class="th">
					<view class="td">
						专业名称
					</view>
					<view class="td">
						专业层次
					</view>
					<view class="td">
						院校数量
					</view>
				</view>
				<view class="tr" v-for="(item,index) in 10" :key="index">
					<view class="td">
						数字媒体艺术设计
					</view>
					<view class="td">
						本科
					</view>
					<view class="td">
						78
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"
	
	export default {
		components: {
			"helang-checkbox": helangCheckbox
		},
		data() {
			return {
	
			}
		},
		onshow: function() {
			let that = this;
	
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.checkboxA.set({
					//这里填写插件所需参数
					type: 'checkbox', // 类型：单选框
					index: 0, // 默认选中的项
					column: 2, // 分列
					list: [ // 列表数据
						{
							text: '物理'
						},
						{
							text: '历史'
						},
						{
							text:'数学'
						}
					]
				})
				this.$refs.checkboxB.set({
					//这里填写插件所需参数
					type: 'checkbox', // 类型：单选框
					index: 0, // 默认选中的项
					column: 2, // 分列
					list: [ // 列表数据
						{
							text: '化学'
						},
						{
							text: '生物'
						},
						{
							text:'政治'
						},
						{
							text:'地理'
						}
					]
				})
			})
		},
		methods: {
			valueChangeA: function() {
				let that = this;
				/* 获取 已选项的值 */
				let data = that.$refs.checkboxA.get(); // 组件返回的数据
				console.log('主选',data);
			},
			valueChangeB: function() {
				let that = this;
				/* 获取 已选项的值 */
				let data = that.$refs.checkboxB.get(); // 组件返回的数据
				console.log('次选',data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'xuankekanzhuanye.scss';
</style>
